/**
 * 监听 目标元素的 css var 变量
 * @param {Element} element target Element 目标元素
 * @returns
 */
let regXcssVarValue = (prifix) => {
  return RegExp(`${prifix}: (?<cssvarValue>.*?);`);
};

function listenCssVar(element) {
  let a = { data: [], setCssVar, getCssVar, removeCssVar };
  //   console.log('666');

  function setCssVar(cssVar, value) {
    if (a['data'].indexOf(cssVar) == -1) {
      //   console.log('创建成功:', cssVar, value);
      a['data'].push(cssVar);
    }
    a[cssVar] = value;
    if (onlyCssVar(cssVar)) {
      element.style = assembleStyle();
    }
  }

  function getCssVar(cssVar) {
    if (a['data'].indexOf(cssVar) > -1) {
      //   console.log(`${cssVar}: ${a[cssVar]}`);
      return a[cssVar];
    }
  }

  function removeCssVar(cssVar) {
    let index = a['data'].indexOf(cssVar);
    if (index > -1) {
      a['data'].splice(index, 1);
      delete a[cssVar];
      //   console.log(`${cssVar} is removed`);

      return a[cssVar];
    }
  }

  function assembleStyle() {
    let styleStr = '';
    // a 中信息 为 热样式
    for (let i = 0; i < a['data'].length; i++) {
      if (a[a['data'][i]] != undefined) {
        styleStr += `${a['data'][i]}: ${a[a['data'][i]]};`;
      }
    }
    /**
     * 原始样式 冷样式
     */
    styleStr += asyncInlineStyle(element);
    // console.log(styleStr);
    return styleStr;
  }

  /**
   * 解析 当前 元素的 内嵌样式  卸载元素标签上的 style
   * @param {Element} element 当前元素
   */
  function asyncInlineStyle(element) {
    let stackcss = element.style.cssText;
    // console.log(stackcss);

    let stackArr;
    // let val;
    for (let i = 0; i < element.style.length; i++) {
      if (onlyCssVar(element.style[i])) {
        // val = regXcssVarValue(element.style[i]).exec(element.style.cssText);
        // if (val != undefined) {
        //   val = val['groups']['cssvarValue'];
        // }
        // 删除 相关 冷 cssvar 变量
        if (a['data'].indexOf(element.style[i]) > -1) {
          let matchStr = stackcss.match(regXcssVarValue(element.style[i]));
          //   console.log(matchStr, regXcssVarValue(element.style[i]));
          stackArr = stackcss.split('');
          stackArr.splice(matchStr.index, matchStr[0].length);
          stackcss = stackArr.join('');

          //   console.log(stackcss);
        }
        // setCssVar(element.style[i], val);
      }
      //   else {
      //   }
    }

    return stackcss;
  }

  return a;
}

function onlyCssVar(prop) {
  // console.log('看看用到我 检测没');
  if (prop[0] == '-' && prop[1] == '-') {
    return true;
  }
}

export { listenCssVar };
